<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>2.3CSS3画菱形和平行四边形</title>
    <style>
         .diamond{
             width: 200px;
             height: 200px;
             background-color: #6a6;
             margin: 100px auto;
             -webkit-transform: rotate(45deg);
             -ms-transform: rotate(45deg);
             -o-transform: rotate(45deg);
             transform:rotate(45deg);

         }

         .parallel{
             width: 200px;
             height: 100px;
             background-color: #6a6;
             margin: 100px auto;
             -webkit-transform: skew(0deg,20deg);
             -ms-transform:  skew(0deg,20deg);
             -o-transform:  skew(0deg,20deg);
             transform: skew(0deg,20deg);
         }

    </style>
</head>
<body>
<div class="diamond"></div>
<div class="parallel"></div>
</body>
</html>